<template>
	<view>
		<view class="header-bg">
			<!-- <view class="acea-row row-middle row-between nav-bar"> -->
			<!-- 				<swiper class="swiper-box" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000"
					@change="needsSwiperChange">
					<view class="nav-item" :class="navOn==index?'nav-on':''" v-for="(item,index) in navBar" :key="index"
						@click="navOn=index">{{item}}</view>
				</swiper> -->
			<!-- 				<u-scroll-list>
					<view class="nav-item" :class="navOn==index?'nav-on':''" v-for="(item,index) in navBar" :key="index"
						@click="navOn=index">{{item}}</view>
				 </u-scroll-list> -->
			<!-- </view> -->
		</view>
		<view class="content">
			<view class="swiper-box">
				<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" @change="changeVip">
					<swiper-item v-for="(item,index) in vipList" :key="item.id">
						<view class="acea-row row-bottom height-box">
							<view class="acea-row row-column-around swiper-item" :class="'level'+(index+1)">
								<view class="item-r-img">
									<image :src="'../static/images/vip_0'+(index+1)+'.png'" mode=""></image>
								</view>
								<view class="vip-info">
									<view class="acea-row row-middle vip-name">
										<image :src="'../static/images/vip_00'+(index+1)+'.png'" mode=""></image>
										<view class="text">{{item.name}}</view>
										<!-- <view class="continue-btn">立即续费</view> -->
									</view>
									<view class="acea-row row-middle end-date">
										<text v-if="item.vip == 1">{{item.endTime}}到期</text>
										<text v-else>暂未开通</text>
										<!-- 已节省 <text class="price">870元</text> -->
									</view>
								</view>
								<view class="progress-box">
									<!-- 	<view class="acea-row row-middle row-between progress-text">
										<view class="">
											3921<text>/20000 成长值</text>
										</view>
										<view class="">2000积分</view>
									</view>
									<view class="progress-bg">
										<view class="progress-line" style="width: 22%;"></view>
									</view> -->
									<view class="progress-text">
										<view>特权</view>
										<view>
											<text class="mr">1.设置{{item.name}}信息{{packageList[dateOn].vipInfo?packageList[dateOn].vipInfo:'0'}}条</text>
											<text>2.每日聊天次数{{packageList[dateOn].vipChat?packageList[dateOn].vipChat:'0'}}个用户</text>
										</view>
										<view>
											<text class="mr">3.赠送金币{{packageList[dateOn].vipCoin?packageList[dateOn].vipCoin:'0'}}个</text>
											<text>4.地图找铺信息详情</text>
										</view>

									</view>
								</view>
							</view>
						</view>
					</swiper-item>

				</swiper>
			</view>

			<view class="dates-list">
				<scroll-view scroll-x="true" style="display: flex;white-space: nowrap;">
					<view class="date-box" v-for="(item,index) in packageList" :key="index" @click="dateOn=index">
						<view class="acea-row row-column-between price" :class="dateOn==index?'date-on':''">
							<view class="tag" v-if="item.vipCoin">限时特惠</view>
							<view class="name">{{item.name}}</view>
							<view class="">
								<view class="now-price"><text> 
										<image src="@/static/images/goldcoin_icon.png" mode=""></image>
									</text>{{Number(item.coin) - Number(item.vipCoin)}}
								</view>
								<view class="old-price"><text>
										<image src="@/static/images/goldcoin_icon.png" mode=""></image>
									</text>{{item.coin}}</view>
							</view>
							<view class="introduce">赠送经验 {{item.experience}}</view>
						</view>
					</view>
					<!-- 		<u-empty v-if="packageList.length<=0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
					</u-empty> -->
					<!-- <view v-if="packageList.length<=0" style="text-align: center;color: #ccc;margin-top: 50rpx;"> 暂无套餐
					</view> -->
					<view class="empty-placeholder">
						<view v-if="packageList.length<=0" style="text-align: center;color: #ccc;margin-top: 50rpx;">
							暂无套餐
						</view>
						<!-- 		<u-empty
						        mode="car"
						        icon="http://cdn.uviewui.com/uview/empty/car.png"
						>
						</u-empty> -->
					</view>
				</scroll-view>
			</view>
			<view class="dates-text">
				<!-- 可设置转店VIP信息一条，该信息每天24小时自动刷新 -->
				<view v-if="packageList[dateOn]&&packageList[dateOn].vipInfo">
					可设置{{vipList[vipOn]&&vipList[vipOn].name}}信息
					<text
						style="color: red;">{{(packageList[dateOn]&&packageList[dateOn].vipInfo) || 0}}条</text>，该信息每天24小时自动刷新
				</view>
				<view v-else>未选择套餐</view>
			</view>
			<view class="submit-btn" @click="toBuy">
				立即 <text v-if="vipList[vipOn]&&vipList[vipOn].vip == 1">续费</text> <text v-else>开通</text>
			</view>
			<view class="acea-row row-middle row-center radio-box">
				<radio value="gree" @click="accept" :checked="isAgree == 'gree'" color="#fee1ae"
					style="transform:scale(0.7)" />
				<view>已阅读并同意</view>
				<view class="bold" @click="toPage">《付费协议》</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getVipList,
		getvipPackageList,
		toKtVip
	} from '@/api/vip.js'
	import {
		Debounce
	} from '@/utils/validate.js'
	export default {
		data() {
			return {
				navBar: ['转店VIP会员', '找店VIP会员', '找店VIP会员', '转店VIP会员', '找店VIP会员', '找店VIP会员'],
				navOn: 0,
				priceList: [1, 2, 1, 1, 1],
				dateOn: 0,
				isAgree: '',
				vipOn: 0,
				vipImage: '../static/images/vip_00',
				vipImageSuffix: '.png',
				vipList: [],
				packageList: []
			};
		},
		mounted() {
			this.getVip();
		},
		methods: {
			getVip() {
				getVipList().then(res => {
					this.vipList = res.data
					this.getPackageList(this, this.vipList[0].id)
				})
			},
			accept() {
				this.isAgree = this.isAgree ? '' : 'gree'
			},
			toBuy() {
				let that = this;
				if (!this.isAgree) {

					uni.showModal({
						title: '提示',
						content: '请先确认协议',
						success: function(res) {
							if (res.confirm) {
								that.isAgree = 'gree'
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
					return;
				}

				uni.showModal({
					title: '提示',
					content: '是否立即开通/续费',
					success: function(res) {
						if (res.confirm) {
							toKtVip({
								vipId: that.vipList[that.vipOn].id,
								packageId: that.packageList[that.dateOn].id
							}).then(res => {
								that.$util.Tips({
									title: 'VIP开通成功'
								})
								that.getVip();
							}).catch(e => {
								console.log(e)
								if (e.indexOf("金币不足") !== -1) {
									that.$util.Tips({
										title: '金币不足'
									}, {
										tab: 2,
										url: '/pages/aboutUsers/userGoldcoin/userGoldcoin'
									});

								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});


			},
			toPage() {
				uni.navigateTo({
					url: '/pages/aboutUsers/privacy/index'
				})
			},
			changeVip(e) {
				console.log(e.detail.current)
				this.vipOn = e.detail.current
				this.dateOn = 0;
				this.getPackageList(this, this.vipList[e.detail.current].id)
			},
			getPackageList: Debounce((that, id) => {
				getvipPackageList({
					vipId: id
				}).then(res => {
					console.log('pageckageList', res)
					that.packageList = res.data;
				})
			})
		}

	}
</script>

<style lang="scss">
	.mr {
		margin-right: 15rpx;
	}

	.empty-placeholder {
		text-align: center;
		padding: 20px;
		font-size: 16px;
		color: #888;
	}

	.header-bg {
		position: relative;
		width: 100%;
		height: 270rpx;
		opacity: 1;
		background: rgba(8, 5, 1, 1);

		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 42rpx;
			background: rgba(8, 5, 1, 1);
			border-radius: 50%;
			position: absolute;
			bottom: -21rpx;
			left: 0;
		}
	}

	.nav-bar {
		width: 100%;
		padding: 0 30rpx;

		.nav-item {
			width: 50%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			color: rgba(172, 169, 172, 1);
			padding: 16rpx 0;
		}

		.nav-on {
			font-size: 30rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 42rpx;
			color: rgba(241, 240, 246, 1);
			position: relative;

			&::before {
				content: '';
				display: block;
				width: 32rpx;
				height: 4rpx;
				opacity: 1;
				border-radius: 4rpx;
				background: rgba(241, 240, 246, 1);
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.content {
		position: relative;
		top: -260rpx;
	}

	.swiper-box {

		padding: 30rpx 30rpx 0 30rpx;
		border-bottom: 1px solid rgba(247, 247, 247, 1);

		swiper,
		swiper-item {
			height: 400rpx;
			display: block;
			width: 100%;
		}

		.height-box {
			height: 350rpx;
		}

		.swiper-item {
			width: 100%;
			height: 320rpx;
			border-radius: 40rpx;
			position: relative;
			padding: 30rpx;
			bottom: 0;

			.item-r-img {
				width: 242rpx;
				height: 168rpx;
				position: absolute;
				top: -12rpx;
				right: 42rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.vip-info {
				image {
					width: 38rpx;
					height: 40rpx;
				}
			}

			.text {
				font-size: 40rpx;
				font-weight: 400;
				line-height: 52rpx;
				padding: 0 12rpx;
			}

			.end-date {
				display: inline-block;
				font-size: 24rpx;
				font-weight: 300;
				line-height: 42rpx;
				padding: 12rpx 18rpx 12rpx 0;
			}

			.price {
				font-weight: 700;
			}

			.progress-text {
				font-size: 24rpx;
				font-weight: 700;
				line-height: 42rpx;

				text {
					font-weight: 300;
				}
			}

			.progress-bg {
				width: 100%;
				height: 6rpx;
				border-radius: 10rpx;
				margin-top: 16rpx;
			}

			.progress-line {
				height: 100%;
				border-radius: 10rpx;
			}

			.continue-btn {
				width: 140rpx;
				height: 42rpx;
				opacity: 1;
				border-radius: 50rpx;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				text-align: center;
			}

		}
	}

	.level1 {
		background: linear-gradient(148.48deg, rgba(254, 228, 182, 1) 0%, rgba(253, 205, 121, 1) 59.21%, rgba(248, 212, 140, 1) 100%);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(159, 83, 0, 1);
		}

		.end-date {
			color: rgba(164, 101, 9, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(164, 101, 9, 1);
				border-right: 1px solid rgba(164, 101, 9, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(170, 112, 20, 1);
		}

		.progress-bg {
			background: rgba(252, 222, 168, 1);
		}

		.progress-line {
			background: linear-gradient(90deg, rgba(242, 161, 70, 1) 0%, rgba(189, 106, 13, 1) 100%);
		}
	}

	.level2 {
		background: rgba(26, 26, 26, 1);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(242, 203, 105, 1);
		}

		.end-date {
			color: rgba(242, 203, 105, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(242, 203, 105, 1);
				border-right: 1px solid rgba(242, 203, 105, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(242, 203, 105, 1);
		}

		.progress-bg {
			background: rgba(42, 39, 40, 1);
		}

		.progress-line {
			background: linear-gradient(90deg, rgba(250, 233, 198, 1) 0%, rgba(248, 173, 103, 1) 60.53%, rgba(247, 202, 90, 1) 100%);
		}
	}

	.level3 {
		background: linear-gradient(146.58deg, rgba(243, 245, 245, 1) 0%, rgba(201, 229, 255, 1) 100%);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(21, 128, 237, 1);
		}

		.end-date {
			color: rgba(61, 124, 182, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(61, 124, 182, 1);
				border-right: 1px solid rgba(61, 124, 182, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(61, 124, 182, 1);
		}

		.progress-bg {
			background: rgba(255, 255, 255, 0.5);
		}

		.progress-line {
			background: linear-gradient(128.28deg, rgba(34, 142, 251, 1) 0%, rgba(12, 112, 251, 1) 100%);
		}
	}

	.level4 {
		background: linear-gradient(148.48deg, rgba(239, 240, 251, 1) 0%, rgba(228, 212, 254, 1) 59.21%, rgba(171, 195, 255, 1) 100%);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(75, 62, 249, 1);
		}

		.end-date {
			color: rgba(55, 42, 191, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(55, 42, 191, 1);
				border-right: 1px solid rgba(55, 42, 191, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(55, 42, 191, 1);
		}

		.progress-bg {
			background: rgba(198, 215, 253, 1);
		}

		.progress-line {
			background: linear-gradient(90deg, rgba(182, 190, 253, 1) 0%, rgba(74, 57, 255, 1) 100%);
		}
	}

	.level5 {
		background: linear-gradient(146.58deg, rgba(243, 245, 245, 1) 0%, rgba(200, 225, 232, 1) 100%);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(42, 116, 141, 1);
		}

		.end-date {
			color: rgba(55, 100, 119, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(55, 100, 119, 1);
				border-right: 1px solid rgba(55, 100, 119, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(55, 100, 119, 1);
		}

		.progress-bg {
			background: rgba(255, 255, 255, 0.5);
		}

		.progress-line {
			background: linear-gradient(90deg, rgba(174, 202, 211, 1) 0%, rgba(55, 119, 143, 1) 100%);
		}
	}

	.level6 {
		background: linear-gradient(148.48deg, rgba(255, 255, 0, 1.0) 0%, rgba(255, 255, 127, 1.0) 59.21%, rgba(170, 255, 0, 1.0) 100%);

		.continue-btn {
			border: 1px solid rgba(135, 94, 43, 1);
			color: rgba(135, 94, 43, 1);
		}

		.text {
			color: rgba(159, 83, 0, 1);
		}

		.end-date {
			color: rgba(164, 101, 9, 1);
			position: relative;

			&::before {
				position: absolute;
				content: '';
				display: block;
				width: 8rpx;
				height: 8rpx;
				border-top: 1px solid rgba(164, 101, 9, 1);
				border-right: 1px solid rgba(164, 101, 9, 1);
				transform: rotate(45deg);
				right: 0%;
				top: 50%;
				margin-top: -4rpx;
			}
		}

		.progress-text {
			color: rgba(170, 112, 20, 1);
		}

		.progress-bg {
			background: rgba(252, 222, 168, 1);
		}

		.progress-line {
			background: linear-gradient(90deg, rgba(242, 161, 70, 1) 0%, rgba(189, 106, 13, 1) 100%);
		}
	}


	.dates-list {
		width: 100%;
		height: 370rpx;
		padding: 0 0 30rpx 30rpx;

		.date-box {
			width: 242rpx;
			height: 310rpx;
			margin-right: 24rpx;
			display: inline-block;
			position: relative;
		}

		.price {
			width: 100%;
			height: 288rpx;
			border-radius: 10px;
			background: rgba(254, 254, 254, 1);
			border: 1px solid rgba(242, 242, 242, 1);
			position: absolute;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;

			.tag {
				position: absolute;
				width: 130rpx;
				height: 44rpx;
				opacity: 1;
				border-radius: 0px 22rpx 0px 22rpx;
				background: rgba(23, 23, 23, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: rgba(253, 207, 127, 1);
				text-align: center;
				left: 0;
				top: -22rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: rgba(120, 115, 105, 1);
			}

			.now-price {
				font-size: 48rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);

					image {
						width: 37rpx;
						height: 37rpx;
						margin-right: 8rpx;
					}
				}
			}

			.old-price {
				font-size: 24rpx;
				font-weight: 400;
				line-height: 42rpx;
				text-decoration-line: line-through;
				color: rgba(167, 166, 167, 1);

				text {
					vertical-align: middle;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 8rpx;
						line-height: 42rpx;
					}
				}
			}

			.introduce {
				margin: 0 12rpx;
				height: 44rpx;
				border-radius: 40rpx;
				background: rgba(254, 226, 175, 1);
				padding: 4rpx 16rpx;
				text-align: center;
			}
		}

		.date-on {
			background: rgba(255, 247, 232, 1);
		}
	}

	.dates-text {
		font-size: 26rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(112, 112, 112, 1);
		text-align: center;
	}

	.submit-btn {
		margin: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 88rpx;
		text-align: center;
		color: rgba(135, 94, 43, 1);
		background: linear-gradient(90deg, rgba(254, 225, 174, 1) 0%, rgba(253, 206, 124, 1) 100%);
	}

	.radio-box {
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(112, 112, 112, 1);

		.bold {
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(1, 0, 0, 1);
		}
	}

	.swiper-box uni-swiper {
		height: 400rpx;
	}
</style>
<style>
	page {
		background: #ffffff;
	}
</style>